import React, { lazy, Suspense } from "react";
import { Layout, Menu, Icon, Button, ConfigProvider } from "antd";
import { COMPONENT_CHANGE, LANGUAGE_CHANGE } from "../store/actionTypes";
import zhCN from "antd/es/locale/zh_CN";
import En from "antd/es/locale/en_GB";
import store from "../store";
import history from "../router/history";
import ComChage from './comChange'
// 左侧样式
require("../static/style/left.scss");
require("../App.css");
// 引入阿里云字体
const { Sider, Content } = Layout,
  { SubMenu } = Menu,
  IconFont = Icon.createFromIconfontCN({
    scriptUrl: "http://at.alicdn.com/t/font_1522569_6a0dlbm6sjw.js"
  });
let LeftList = store.getState().leftNavList;
// 内存泄漏
function inject_unount(target) {
  // 改装componentWillUnmount，销毁的时候记录一下
  let next = target.prototype.componentWillUnmount;
  target.prototype.componentWillUnmount = function() {
    if (next) next.call(this, ...arguments);
    this.unmount = true;
  };
  // 对setState的改装，setState查看目前是否已经销毁
  let setState = target.prototype.setState;
  target.prototype.setState = function() {
    if (this.unmount) return;
    setState.call(this, ...arguments);
  };
}
@inject_unount
class LoginSuess extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapsed: false,
      store: store.getState(),
      nav: React.createRef()
    };
  }
  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed
    });
  };
  toindex = () => {
    history.push({
      pathname: "/",
      state: {
        indexData: "卧槽  传过去吧兄弟"
      }
    });
  };
  render(h) {
    return (
      <div className={`over`} style={{ height: "100%" }}>
        <Button id={`toTop`} type="primary" shape="circle" icon="to-top" />
        <div className={`relative floatL`}>
          <div className={`leftTitle`}>
            <div className="userImg" onClick={this.toindex}>
              <div className="bruce flex-ct-x">
                <div className="avatar-shadow"></div>
              </div>
            </div>
          </div>
          <Sider
            className="left relative"
            trigger={null}
            collapsible
            collapsed={this.state.collapsed}
          >
            <Menu
              theme="dark"
              mode="inline"
              defaultSelectedKeys={[this.state.store.components[0].id]}
            >
              {LeftList.map((LeftListChildArr, index) => {
                return (
                  <SubMenu
                    key={index}
                    title={
                      <span>
                        <Icon type={LeftListChildArr.main.icon} />
                        <span>{LeftListChildArr.main.text}</span>
                      </span>
                    }
                  >
                    {LeftListChildArr.Arr.map((item, index) => {
                      return (
                        <Menu.Item
                          key={item.id}
                          onClick={this.changeComponent.bind(this, item)}
                        >
                          {/* <NavLink to={item.router}> */}
                          <IconFont type={item["icon"]} />
                          <span>{item.text}</span>
                          {/* </NavLink> */}
                        </Menu.Item>
                      );
                    })}
                  </SubMenu>
                );
              })}
            </Menu>
            <div
              className="flex flexA"
              style={{ position: "absolute", bottom: "5px", width: "100%" }}
            >
              <Button
                style={{ padding: "0 10px" }}
                type="primary"
                onClick={this.changeLanguage.bind(this)}
              >
                <IconFont type="icon-yuyan" />
              </Button>
              <Button
                type="primary"
                icon={this.state.collapsed ? "fullscreen" : "fullscreen-exit"}
                onClick={this.toggle}
              ></Button>
            </div>
          </Sider>
        </div>
        {/* 右侧 */}
        <ConfigProvider locale={this.state.store.language === true ? zhCN : En}>
          <Layout style={{ height: "100%", overflow: "scroll" }}>
            <Content
              style={{
                margin: "24px 16px",
                padding: 24,
                background: "#eee",
                minHeight: 280
              }}
            >
              <div ref={this.state.nav}></div>
              <Layout className={`none`}>
                {this.state.store.components
                  .filter(item => item["check"] === true)
                  .map((item, index) => {
                    let str = item["component"];
                    let Usecom = lazy(() => import(`${str}`));
                    return (
                      <Suspense
                        key={index}
                        fallback={<ComChage />}
                      >
                        <Usecom />
                      </Suspense>
                    );
                  })}
              </Layout>
            </Content>
          </Layout>
        </ConfigProvider>
      </div>
    );
  }
  // 改变左侧组件 路由不刷新
  changeComponent(e) {
    // 单页面组件切换刷新
    let action = {
      type: COMPONENT_CHANGE,
      component: e.component
    };
    store.dispatch(action);
    this.setState({
      store: store.getState()
    });
  }
  changeLanguage(e) {
    let action = {
      type: LANGUAGE_CHANGE
    };
    store.dispatch(action);
    this.setState({
      store: store.getState()
    });
  }
  componentWillMount() {
    // 在服务端和客户端 ref 访问不到
    // path: /wxopen/basicprofile?action=index&f=json&token=894020456&lang=zh_CN

  }
  componentDidMount() {
    // 页面渲染完成 ref 访问
  }
  // 子组件是不是应该更新
  shouldComponentUpdate() {
    return true;
  }
  componentWillUnmount() {
    // 当组件从DOM中移除
    this.setState = (state, callback) => {
      return state;
    };
  }
}
export default LoginSuess;
